<template>
  <div class="provincesales-wrapper">
      <div class="filter-wrapper">
          <BaseFilter :config="provinceOptions" @mychange="(values) => setFilterData('province', values)" />
      </div>
      <div class="filter-wrapper">
          <BaseFilter :config="dateOptions" @mychange="(values) => setFilterData('date', values)" />
      </div>
      <div class="table-wrapper">
          <BaseTable :columns="tableColumns" :tableData="tableData || []" />
      </div>
  </div>
</template>

<script>
import BaseFilter from "@/components/BaseFilter.vue";
import { cityOptionsData } from "../../config/city";
import BaseTable from "@/components/BaseTable.vue";
import { getActivityData, queryActivityData } from "@/api/data";
export default {
    name: "provincesales",
    components: {
        BaseFilter,
        BaseTable
    },
    data(){
        return {
            date: null,
            provinceOptions: [
                {
                    label: "省份",
                    key: "province",
                    type: "select",
                    props: {
                        placeholder: "选择省份"
                    },
                    options: cityOptionsData
                }
            ],
            dateOptions: [
                {
                    label: "按年",
                    key: "year",
                    type: "datepicker",
                    props: {
                        type: "year",
                        placeholder: "选择年份"
                    },
                },
                {
                    label: "按月",
                    key: "month",
                    type: "datepicker",
                    props: {
                        type: "month",
                        placeholder: "选择年份"
                    },
                }
            ],
            filterData: {},
            sumsaleData: [{
                title: "合伙人总销量",
                value: 3,
                key: "hehuo-sale"
            }, {
                title: "大客户总销量",
                value: 119,
                key: "kehu-sale"
            }],
            activeName: 'first',
            tableColumns: [
                {
                    title: "省",
                    key: "province",
                },
                {
                    title: "活跃度",
                    key: "active_value",
                    props: {
                        sortable: true
                    }
                }
            ],
            tableData: []
        }
    },
    mounted(){
        getActivityData().then(res => {
            if(res.code === 200){
                this.tableData = res?.res || []
                return
            }
            this.$message.error("加载数据失败")
        }).catch(err => {
            this.$message.error("加载数据失败")
        })
    },
    methods: {
        setFilterData(key, values){
            this.filterData = {
                ...this.filterData,
                [key]: values
            };
            if(key === "province"){
                queryActivityData(values?.province).then(res => {
                    if(res.code === 200){
                        this.tableData = res.resoult || []
                    }
                })
            }
        },
    }
}
</script>

<style lang="scss">
.provincesales-wrapper {
    width: 100%;
    height: 100%;
    background-color: #FFF;
    padding: 16px 24px;
    box-sizing: border-box;
    .date-picker {
        label {
            display: inline-block;
            width: 100px;
            &::after {
                content: ":";
                margin-left: 3px;
            }
        }
    }
    .filter-wrapper {
        margin-top: 20px;
        display: flex;
    }
    .table-wrapper {
        margin-top: 20px;
    }
}
</style>